<template>
  <view>
    <u-picker :show="screenTime" :columns="columns" :closeOnClickOverlay="sfdfdsa" @close="closeScreen"></u-picker>
    <view class="search-contaienr">
      <u-search placeholder="请输入客户、订单号查询" :showAction="false" bgColor="#fff" v-model="keyword"></u-search>
    </view>
    <view class="screen-container">
      <view class="screen-time" @tap="screenTime = true">
        <!-- 下拉菜单 -->
        本月 <u-icon name="arrow-down-fill"></u-icon>

      </view>
      <view class="screen-status" @tap="screenTime = true">
        待审核 <u-icon name="arrow-down-fill"></u-icon>
      </view>
    </view>
    <view class="info-card-contaienr">
      <view class="card-item">
        <view class="card-top">
          <view class="item-info">
            <view class="item-title">订单总数</view>
            <view class="item-content">0</view>
          </view>
          <view class="item-info">
            <view class="item-title">提成</view>
            <view class="item-content">0</view>
          </view>
        </view>
        <view class="order-num">
          <view class="item-title">订单笔数：<span class="item-content2">0</span></view>
        </view>
      </view>
    </view>
    <view class="order-List">
      <view class="order-tiem">
        2024-01-24
      </view>
      <view style="margin-bottom:20rpx">
        <view class="order-info">
          <view class="order-title">
            <view>
              <view>
                轮胎
              </view>
              <view>
                XHDD20240102122
              </view>
            </view>
            <view style="">
              <orderStatusTag tagName="待审核" tagColor="yellow"></orderStatusTag>
            </view>
          </view>
        </view>
        <view class="cutLine"></view>
        <view class="order-details">
          <view class="left-info">
            <view>
              <view>
                客户：张三
              </view>
              <view>
                联系电话：123213213
              </view>
            </view>
          </view>
        </view>
      </view>
      <view style="margin-bottom:20rpx">
        <view class="order-info">
          <view class="order-title">
            <view>
              <view>
                轮胎
              </view>
              <view>
                XHDD20240102122
              </view>
            </view>
            <view style="">
              <orderStatusTag tagName="待审核" tagColor="blue"></orderStatusTag>
            </view>
          </view>
        </view>
        <view class="cutLine"></view>
        <view class="order-details">
          <view class="left-info">
            <view>
              <view>
                客户：张三
              </view>
              <view>
                联系电话：123213213
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="order-List">
      <view class="order-tiem">
        2024-01-24
      </view>
      <view style="margin-bottom:20rpx">
        <view class="order-info">
          <view class="order-title">
            <view>
              <view>
                轮胎
              </view>
              <view>
                XHDD20240102122
              </view>
            </view>
            <view style="">
              <orderStatusTag tagName="待审核" tagColor="blue"></orderStatusTag>
            </view>
          </view>
        </view>
        <view class="cutLine"></view>
        <view class="order-details">
          <view class="left-info">
            <view>
              <view>
                客户：张三
              </view>
              <view>
                联系电话：123213213
              </view>
            </view>
          </view>
        </view>
      </view>
      <view style="margin-bottom:20rpx">
        <view class="order-info">
          <view class="order-title">
            <view>
              <view>
                轮胎
              </view>
              <view>
                XHDD20240102122
              </view>
            </view>
            <view style="">
              <orderStatusTag tagName="待审核" tagColor="blue"></orderStatusTag>
            </view>
          </view>
        </view>
        <view class="cutLine"></view>
        <view class="order-details">
          <view class="left-info">
            <view>
              <view>
                客户：张三
              </view>
              <view>
                联系电话：123213213
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      sfdfdsa: true,
      screenTime: false,
      columns: [
        ['中国', '美国', '日本']
      ],
      timeOptions: [
        { text: '全部', value: 0 },
        { text: '今天', value: 1 },
        { text: '昨天', value: 2 },
        { text: '近7天', value: 3 },
        { text: '近30天', value: 4 }
      ],
    };
  },
  methods: {
    closeScreen() {
      this.screenTime = false
    }
  }
}
</script>

<style lang="scss" scoped>
.order-tiem {
  padding: 20upx;
  background-color: #F4F5F7
}

.order-List {
  background-color: #F4F5F7;

  .order-info {
    padding: 20upx;
    background-color: #fff;

    .order-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }

  .order-details {
    padding: 20upx;
    display: flex;
    justify-content: space-between;

    background-color: #fff;

    .left-info {
      display: flex;
      width: 50%;

      .view {
        margin-bottom: 20upx;
      }
    }
  }
}

.order-num {
  display: flex;
  justify-content: flex-start;

  .item-title {
    font-size: 32rpx;
    color: #B1FAFF;
  }

  .item-content2 {
    font-size: 54rpx;
    color: #fff;
  }
}

.card-top {
  display: flex;
  justify-content: space-between;
}

.info-card-contaienr {
  background-color: #fff;
  padding: 20upx;
}

.card-item {
  background-color: #02CBC5;
  border-radius: 20rpx;
  padding: 40rpx;

  .item-info {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    .item-title {
      font-size: 32rpx;
      color: #B1FAFF;
    }

    .item-content {
      font-size: 54rpx;
      color: #fff;
    }

  }
}

.search-contaienr {
  padding: 20upx;
  background-color: #F4F5F7;
}

.screen-container {
  display: flex;
  border-bottom: 1px solid #E5E5E5;
  justify-content: space-between;
  padding: 20upx;
  background-color: #fff;

  .screen-status {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;

    align-items: center;

    u-icon {
      margin-left: 10upx;
    }
  }

  .screen-time {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
    border-right: 1px solid #E5E5E5;

    u-icon {
      margin-left: 10upx;
    }
  }
}
</style>
